<template>
  <div>
    <div class="buttons">
      <!-- 未登录状态 -->
      <template v-if="!memberStore.profile">
        <!-- 登录按钮 -->
        <div class="btn btn-primary btn-round" @click="goto('/login')">
          {{ $t("header.login") }}
        </div>
      </template>
      <!-- 已登录状态 -->
      <template v-else>
        <div class="user-logo-outer pointer">
          <div class="user-logo">
            <img
              class="logo"
              v-logo-error
              :src="memberStore.profile?.headimgurl"
              alt=""
              v-if="memberStore.profile?.headimgurl"
            />
            <img
              class="logo"
              src="~/assets/images/user-logo/default_logo.jpg"
              alt=""
              v-else
            />
            <i class="iconfont icon-arrow-down"></i>
            <div class="menu-panel">
              <div
                class="menu-panel-item"
                @click.stop="goto('/new_profile/base')"
              >
                {{ $t("header.enter") }}
              </div>
              <div
                class="menu-panel-item"
                style="color: #ff4060"
                @click.stop="logout"
              >
                {{ $t("header.logout") }}
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 语言切换 -->
      <div
        class="language-select btn btn-default btn-round"
        :class="languagePanelVisible ? 'show-child' : ''"
        @click.stop="onClickTogglePcLanguage"
      >
        <span>{{ languageList[memberStore.AppLangIndex]?.label }}</span>
        <i class="iconfont icon-arrow-down"></i>
        <!-- <Transition name="fadeInDown"> -->
        <div class="menu-panel">
          <div
            class="menu-panel-item"
            v-for="(item, index) in languageList"
            :key="item.id"
            @click.stop="onSelectLanguage(item, index)"
            :class="index == memberStore.AppLangIndex ? 'active' : ''"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- </Transition> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import languageList from "~/data/languageList";
import { postChangeLanguage } from "~/api/api";
import { useMemberStore } from "~/store";
import { useRoute } from "vue-router";
import { useCookie } from "nuxt/app";
const memberStore = useMemberStore();
const route = useRoute();

// 语言面板是否可见 0: 隐藏 1: 显示
const languagePanelVisible = ref(false);
const onClickTogglePcLanguage = () => {
  languagePanelVisible.value = !languagePanelVisible.value;
};

// 当前语种
const onSelectLanguage = async (item: any, index: number) => {
  if (index == memberStore.AppLangIndex) return;
  let res = await postChangeLanguage(item.value);
  if (res.code === 200) {
    const useCookieLang = useCookie("lang");
    useCookieLang.value = item.value;
    sessionStorage.removeItem("cacheStore");
    location.reload();
  }
};

// 退出登录
let logoutPath = ["/profile", "/new_profile", "/member"];
const logout = () => {
  memberStore.clearProfile();
  logoutPath.forEach((item) => {
    if (route.path.includes(item)) {
      goto("/");
    }
  });
};
</script>
<style scoped lang="less">
.buttons {
  display: flex;
  gap: 24px;
  .btn {
    position: relative;
    i {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 8px;
      font-size: 14px;
    }
  }
}
.menu-panel {
  position: absolute;
  right: 0;
  top: 32px;
  padding: 4px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #e6edf2;
  z-index: 9;
  .menu-panel-item {
    padding: 10px 8px;
    min-width: 115px;
    height: 38px;
    border-radius: 8px;
    font-size: 13px;
    color: #36434d;
    white-space: nowrap;
    cursor: pointer;
    &:hover {
      background: #f5f8fa;
    }
  }
}

.menu-panel {
  top: 53px;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(15px);
  visibility: hidden;
}

.language-select {
  padding-left: 16px;
  padding-right: 40px;
  .menu-panel {
    top: 55px;
    .menu-panel-item {
      width: 120px;
      &.active {
        color: var(--yd-primary-color);
      }
    }
  }
  &:hover {
    .menu-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.user-logo-outer {
  height: 100%;
  display: flex;
  align-items: center;
  .user-logo {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px;
    padding-right: 8px;
    background-color: #f5f8fa;
    border-radius: 100px;
    border: 1px solid #e6edf2;
    .menu-panel {
      top: 53px;
      transition: all 0.3s;
      opacity: 0;
      transform: translateY(15px);
      visibility: hidden;
    }
    i {
      transition: all 0.3s;
    }
    .logo {
      width: 36px;
      height: 36px;
      margin-right: 12px;
    }
  }
  &:hover {
    .user-logo {
      background-color: #fff;
    }
    i {
      transform: translateY(-2px) rotate(-180deg);
    }
    .menu-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>
